<template>
  <!--    container布局-->
  <div>
    <el-container>
      <el-aside :width="sideWidth+'px'"
                style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35%)">

        <!--侧边栏组件-->
        <SideMenu :isCollapse="isCollapse"></SideMenu>
      </el-aside>

      <el-container>
        <el-header style="border-bottom: 1px solid #ccc;">
          <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" :user="user"></Header>
        </el-header>

        <el-main>
          <!--表示当refreshUser前页面的子路由会在 <router-view>里面展示-->
          <router-view  @refreshUser="getUser" />
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
import SideMenu from "@/components/SideMenu";
import Header from "@/components/Header";
export default {
  components:{
    "SideMenu":SideMenu,
    "Header":Header,
  },
  data() {
    return {
      sideWidth: 200,//侧边栏展开时的大小
      collapseBtnClass: 'el-icon-s-fold',//  展开/收缩图标
      isCollapse: false,//  展开/收缩属性默认展开
      user:{},

    }
  },
  created() {
  //从后台获取最新的user数据
    this.getUser()
  },
  methods:{
    collapse() {
      this.isCollapse = !this.isCollapse
      //当收缩时,侧边栏宽度改变
      if (this.isCollapse) {
        this.sideWidth = 64
        //收缩时改变图标
        this.collapseBtnClass = 'el-icon-s-unfold'
      } else {
        //点击展开,侧边栏宽度恢复
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'

      }
    },
    //从后台获取数据
    getUser(){
      let username=localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")).username:""
      this.$axios.get("/user/username/"+username).then(res=>{
        //重新复制后台传过来的user数据
        // console.log(res.data.data)
        this.user=res.data.data
      })
    }
  },

}
</script>
